<script setup>
import { ref } from 'vue';
import SonCom from './components/SonCom.vue';
const msg=ref('来自父组件的数据')

const onMsgChange=(event)=>{
  msg.value=event
}
</script>
<template>
<div class="box">
  <h1>父组件</h1>
  <p>{{ msg }}</p>
  <button @click="msg+='!'">修改数据</button>
<!-- <SonCom :msg="msg" /> -->
  <!-- 3. 监听消息(事件) -->
<SonCom :msg="msg" @update:msg="msg=$event" />
 <SonCom :msg="msg" @update:msg="onMsgChange" />

    <!-- Vue2 属性双向绑定 写法 -->
    <!-- <SonCom :msg.sync="msg" /> -->
    <!-- Vue3 属性双向绑定 写法，v-model:msg 等价于 :msg="msg" + @update:msg="msg = $event" -->
    <SonCom v-model:msg="msg" />
</div>
</template>
<style scoped>
 .box{
    padding: 20px;
    border: 5px solid #000;
  }
</style>
